<template>
  <div class="myCenter">
    <!-- 已登录头部 -->
    <div v-if="user">
      <div class="bgc">
        <!-- 用户信息区域 -->
        <div class="bigBox">
          <div class="left">
            <van-image
              class="fakeImg"
              src="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png"
              round
            ></van-image>
            <div class="text">
              <!-- 有昵称时优先选择昵称 -->
              <div class="text1">{{ user1.name || user1.user_name }}</div>
              <div class="userId">ID:{{ user1.user_id }}</div>
            </div>
          </div>
          <div class="right">
            <van-icon class-prefix="iconfont icon-shezhi1 " @click="editUser = true" />
          </div>
        </div>

        <div class="plus_black_wrap">
          <van-grid :column-num="4" class="gridBar" :border="false">
            <van-grid-item text="我的店铺" />
            <van-grid-item text="收藏店铺" />
            <van-grid-item text="进店记录" />
            <van-grid-item text="收货地址" to="/shippingAddress" />
          </van-grid>
        </div>
      </div>

      <!-- 消费区 -->
      <van-grid :column-num="3" :border="false" class="shopping">
        <van-grid-item clickable to="/goodscar">
          <van-icon class-prefix="iconfont icon-gouwuche1 gwc"></van-icon>
          <span class="tx">购物车</span>
        </van-grid-item>
        <van-grid-item clickable to="/money">
          <van-icon class-prefix="iconfont icon-qianbao qb"></van-icon>
          <span class="tx">钱包</span>
        </van-grid-item>
        <van-grid-item clickable text="我的优惠券" to="/coupon">
          <van-icon class-prefix="iconfont icon-youhuiquan1 yhq"></van-icon>
          <span class="tx">优惠券</span>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 未登录头部 -->
    <div v-else class="header not-login">
      <div class="login-btn" @click="$router.push('/login')">
        <img
          class="mobile-img"
          src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=283284588,2796778480&fm=26&gp=0.jpg"
        />
        <span class="text">登录</span>
      </div>
    </div>
    <!-- /未登录头部 -->

    <!--  功能区 -->
    <van-cell-group class="fcArea" :border="false" v-if="user">
      <van-cell title="申请开店" is-link to="/applyOpenStore" />
      <van-cell title="推广赚钱" is-link to="/promotion" />
      <van-cell title="我的推广" is-link to="/myPromotion" />
      <van-cell title="帮助中心" is-link to="/help" />
      <van-cell title="退出登录" is-link v-if="user" @click="onLogout" />
    </van-cell-group>

    <!-- 编辑用户资料弹出层 -->
    <van-popup v-model="editUser" position="bottom" :style="{ height: '100%' }">
      <edit-user @close="editUser = false" :user="user1" v-if="editUser"></edit-user>
    </van-popup>

    <layout-index></layout-index>
  </div>
</template>

<script>
import { mapState } from 'vuex' // 登录未登录相关
import { login } from '@/api/user'
import { getUser } from '@/api/my.js'
// 修改个人信息
import editUser from './components/edit'
import LayoutIndex from '../layout'
export default {
  name: 'myIndex',
  data () {
    return {
      editUser: false, // 控制编辑用户弹层的显示与隐藏
      // 用户信息  // 防冲突改成了user1
      user1: {}
    }
  },
  components: {
    editUser,
    LayoutIndex
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    this.getUsers()
  },
  mounted () { },
  methods: {
    async getUsers () {
      const { data } = await getUser()
      this.user1 = data.data
      console.log(this.user1)
    },

    onLogout () {
      // 退出提示
      // 在组件中需要使用 this.$dialog 来调用弹框组件
      this.$dialog
        .confirm({
          title: '确认退出吗?'
        })
        .then(() => {
          // on confirm
          // 确认退出: 清除登录状态 (容器中的user + 本地存储中的 user)
          this.$store.commit('setUser', null)
        })
        .catch(() => {
          // on cancel
          console.log('这里取消执行')
        })
    },
    async loadUserInfo () {
      try {
        const { data } = await login()
        console.log(data)
        this.userInfo = data.data
      } catch (error) {
        console.log(error)
        this.$toast('获取数据失败,请稍后重试')
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .van-hairline--top::after {
  background-color: linear-gradient(to left, #eed8ae, #eec591);
}
.myCenter {
  height: 100%;
  background-color: #f5f7f9;
  .bgc {
    // background: linear-gradient(to left, #ff8534, #ee0a43);
    position: relative;
    overflow: hidden;
    width: 100%;
    background: url(https://img12.360buyimg.com/img/s1500x886_jfs/t1/115726/22/13102/240974/5f18fb83Ee40e230b/d4f2a67087fd443a.png) no-repeat scroll 0 0 / cover;
    box-sizing: border-box;
    padding-top: 12px;
    padding-bottom: 10px;
    color: #fff;
    height: 250px;
    .bigBox {
      height: 170px;
      display: flex;
      .left {
        flex: 1;
        height: 200px;
        padding-left: 20px;
        box-sizing: border-box;
        position: relative;
        .text {
          position: absolute;
          left: 180px;
          top: 45px;
          font-size: 25px;
          float: left;
          margin-left: 10px;
          color: #fff;
          .text1 {
            color: #fff;
            font-size: 30px;
          }
          .userId {
            position: absolute;
            left: -5px;
            margin-top: 20px;
            width: 100px;
            height: 25px;
            line-height: 27px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.1);
          }
        }
        .fakeImg {
          position: absolute;
          left: 30px;
          top: 20px;
          border-radius: 50%;
          width: 130px;
          height: 130px;
        }
      }
      .right {
        flex: 1;
        position: relative;
        .icon-shezhi1 {
          font-size: 40px;
          color: #fff;
          position: absolute;
          right: 60px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .plus_black_wrap {
      width: 700px;
      height: 62px;
      margin: 6px auto 0;
      box-sizing: border-box;
      color: #ffe678;
      font-size: 12px;
      /deep/ .gridBar {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        background: url(https://img12.360buyimg.com/img/s678x99_jfs/t1/112839/2/12981/33105/5f17e12aE602bb83e/8a736742745d79cf.png) no-repeat 0 0;
        background-size: cover;
        .van-grid-item__content {
          background-color: rgba(255, 255, 255, 0);
        }
        .van-grid-item__text {
          color: #fff;
        }
      }
    }
  }

  // 购物车
  /deep/ .shopping {
    .van-grid-item__content {
      height: 130px;
    }
    .icon-gouwuche1::before {
      content: '\e615';
      font-size: 40px;
      color: #e60a;
    }
    .icon-qianbao:before {
      content: '\e614';
      font-size: 40px;
      color: #e60a;
    }

    .icon-youhuiquan1:before {
      content: '\e610';
      font-size: 40px;
      color: #e60b;
    }
    .tx {
      font-size: 28px;
    }
  }

  .fcArea {
    margin-top: 10px;
  }
}
.van-popup {
  background-color: #f7f8fa;
}
// 未登录
.header {
  height: 362px;
  background: linear-gradient(to left, #ff8534, #ee0a24);
  background-size: cover;
}
.not-login {
  display: flex;
  justify-content: center;
  align-items: center;
  .login-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .mobile-img {
      width: 132px;
      height: 132px;
      margin-bottom: 15px;
      border-radius: 50%;
    }
    .text {
      font-size: 28px;
      color: #f7f8fa;
    }
  }
}
.logout-cell {
  position: fixed;
  text-align: center;
  color: #d86262;
  bottom: 110px;
  width: 80%;
  margin-left: 10%;
  border-radius: 100px;
  background-color: #ee0a24;
  color: #fff;
  font-size: 30px;
}
</style>
